<template>
  <div class="announcement_notice">
    <div class="announcement_notice-details" @click="handleJump">详情 ></div>
    <div class="scroll-container" @scroll="handleScroll">
      <div class="items">
        <div
          class="announcement_notice-item"
          v-for="item in noticeList"
          :key="item.noticeId"
        >
          <div class="announcement_notice-item-title">
            <el-tag :type="item.noticeType == 2 ? 'success' : 'warning'">{{
              sys_notice_type.filter(
                (type) => type.value == item.noticeType
              )[0] &&
              sys_notice_type.filter((type) => type.value == item.noticeType)[0]
                .label
            }}</el-tag>
            <span
              style="
                font-weight: 500;
                font-size: 13px;
                color: #2a2a2b;
                margin-left: 5px;
              "
              >温馨提醒：{{ item.createTime.split(" ")[0] }}
              {{ item.noticeTitle }}</span
            >
          </div>
          <div style="font-weight: bold; font-size: 13px; color: #9b9b9d">
            {{ item.createTime.split(" ")[0] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="AnnouncementNotice">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { listNotice } from "@/api/system/notice";

const { proxy } = getCurrentInstance();
const { sys_notice_type } = proxy.useDict("sys_notice_type");
const router = useRouter();
const noticeList = ref([]);
const totalItems = ref(0); // 数据总数
const threshold = 2; // 当距离底部还有2个元素的时候开始加载

function handleScroll(event) {
  const { scrollTop, clientHeight, scrollHeight } = event.target;
  const isCloseToBottom = scrollHeight - (clientHeight + scrollTop) < threshold;
  if (isCloseToBottom) {
    // 加载更多数据
    for (let i = noticeList.value.length; i < totalItems; i++) {
      noticeList.value.push(`Item ${i + 1}`);
    }
  }
}

/**
 * 跳转到消息通知管理页面
 */
const handleJump = () => {
  router.push("system/notice");
};

/**
 * 获取公告通知列表
 */
const getNotice = () => {
  listNotice({
    pageNum: 1,
    pageSize: 999,
  }).then((response) => {
    noticeList.value = response.rows;
    totalItems.value = Number(response.total);
  });
};
getNotice();
</script>
<style scoped lang="scss">
.announcement_notice {
  position: relative;

  &-details {
    width: 45px;
    height: 20px;
    line-height: 20px;
    font-weight: 500;
    font-size: 12px;
    color: #acacac;
    text-align: center;
    position: absolute;
    right: 0;
    top: -30px;
    cursor: pointer;
  }

  &-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    padding-right: 10px;
  }
}

.scroll-container {
  height: 140px; /* 设置一个固定的高度 */
  overflow-y: auto;
  position: relative;
}
.items {
  position: absolute;
  width: 100%;
  height: auto; /* 高度根据内容自适应 */
}
</style>
